<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '../stores/user'
import { useCartStore } from '../stores/cart'

const userStore = useUserStore()
const cartStore = useCartStore()

// 登录表单
const username = ref('')
const password = ref('')

const handleLogin = () => {
  userStore.login(username.value, password.value)
}

// 商品列表
const products = [
  { id: 1, name: '商品1', price: 100 },
  { id: 2, name: '商品2', price: 200 },
  { id: 3, name: '商品3', price: 300 }
]
</script>

<template>
  <div class="pinia-demo">
    <h2>状态管理示例</h2>

    <section>
      <h3>1. 用户状态</h3>
      <div v-if="userStore.user.isLoggedIn" class="user-info">
        <p>当前用户：{{ userStore.fullName }}</p>
        <p>邮箱：{{ userStore.user.email }}</p>
        <button @click="userStore.logout">退出登录</button>
      </div>
      <form v-else @submit.prevent="handleLogin">
        <div class="form-item">
          <input v-model="username" placeholder="用户名">
        </div>
        <div class="form-item">
          <input v-model="password" type="password" placeholder="密码">
        </div>
        <button type="submit">登录</button>
      </form>
    </section>

    <section>
      <h3>2. 购物车</h3>
      <div class="cart">
        <div class="products">
          <div v-for="product in products" :key="product.id" class="product">
            <span>{{ product.name }}</span>
            <span>¥{{ product.price }}</span>
            <button @click="cartStore.addItem(product)">加入购物车</button>
          </div>
        </div>

        <div class="cart-items">
          <h4>购物车 ({{ cartStore.itemCount }}件商品)</h4>
          <div v-for="item in cartStore.items" :key="item.id" class="cart-item">
            <span>{{ item.name }}</span>
            <span>¥{{ item.price }} × {{ item.quantity }}</span>
            <div class="quantity">
              <button 
                @click="cartStore.updateQuantity(item.id, item.quantity - 1)"
                :disabled="item.quantity <= 1"
              >-</button>
              <span>{{ item.quantity }}</span>
              <button 
                @click="cartStore.updateQuantity(item.id, item.quantity + 1)"
              >+</button>
            </div>
            <button @click="cartStore.removeItem(item.id)">删除</button>
          </div>
          <div v-if="cartStore.items.length" class="cart-footer">
            <span>总计: ¥{{ cartStore.total }}</span>
            <button @click="cartStore.clearCart">清空购物车</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.pinia-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-item {
  margin: 10px 0;
}

input {
  padding: 5px;
  width: 200px;
}

.cart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.product, .cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
  margin: 5px 0;
}

.quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity button {
  padding: 2px 8px;
}

.cart-footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  padding: 5px 15px;
  margin: 0 5px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style> 